<template>
  <el-container>
    <el-header>
      <headPart></headPart>
    </el-header>
    <el-main>
      <template>
        <div class="main">
          <div class="search-bar">
            <div class="search-tab">
              <span>
                <i>搜索</i>
              </span>
            </div>
            <div class="search-input">
              <input
                type="text"
                placeholder="请输入想搜索的地区"
                v-model="title_contains"
                @keydown.enter="search"
              />
              <i class="el-icon-search" @click="search"></i>
            </div>
          </div>
        </div>
      </template>
    </el-main>
    <el-footer>
      <footerPart></footerPart>
    </el-footer>
  </el-container>
</template>

<script>
import footerPart from "@/Layout/footer/index.vue";
import headPart from "@/Layout/head/index.vue";
export default {
  components: {
    footerPart,
    headPart,
  },
  data() {
    return {
      title_contains: "",
    };
  },
  created() {
    // console.log(27, this.$route);
  },
  methods: {
    search() {
      this.$router.push(
        "/hotel/property?title_contains=" + this.title_contains
      );
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-main {
  height: 700px;
  background: url("https://www.bing.com/th?id=OHR.PFNPAZ_JA-JP6585211634_1920x1080.jpg&rf=LaDigue_1920x1080.jpg")
    center center no-repeat;
  .main {
    margin: 310px auto 0;
    .search-bar {
      width: 552px;
      margin: 0 auto;
      .search-tab {
        position: relative;
        display: flex;
        span {
          width: 82px;
          height: 36px;
          display: block;
          position: relative;
          margin-right: 8px;
          background: #eee;
          cursor: pointer;
          &::after {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            content: "";
            width: 100%;
            height: 100%;
            border: 1px solid hsla(0, 0%, 100%, 0.2);
            border-bottom: none;
            background: #eee;
            transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);
            transform-origin: bottom left;
            border-radius: 1px 2px 0 0;
            box-sizing: border-box;
          }
        }
        i {
          color: #333;
          font-weight: 400;
          font-size: 16px;
          position: absolute;
          z-index: 2;
          display: block;
          width: 100%;
          height: 100%;
          line-height: 30px;
          text-align: center;
        }
      }
      .search-input {
        width: 550px;
        height: 46px;
        margin: 0 auto;
        background: #fff;
        border-radius: 0 4px 4px 4px;
        border: 1px solid hsla(0, 0%, 100%, 0.2);
        border-top: none;
        box-sizing: unset;
        display: flex;
        align-items: center;
        input {
          flex: 1;
          height: 20px;
          padding: 13px 15px;
          outline: none;
          border: 0;
          font-size: 16px;
        }
        i {
          cursor: pointer;
          font-size: 22px;
          padding: 0 10px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
